<template>
  <div>
     <div id="main">
           <ol id="online"> <li class="el-icon-s-platform"></li> 在线音乐
                <router-link to='/yunyin/vmain'><ol class="left_box">音乐馆</ol></router-link>
                <router-link to='/yunyin/list'><ol class="left_box">排行榜</ol></router-link>
                <router-link to='/yunyin/find'> <ol class="left_box">发现</ol></router-link>
            </ol>
            <ol id="online"><li class="el-icon-user-solid"></li>我的音乐
                <ol class="left_box" @click="talk">我喜欢的</ol>
                <ol class="left_box" @click="talk">本地下载</ol>
                <router-link to='/yunyin/user'><ol class="left_box">播放历史</ol></router-link>
                <ol class="left_box" @click="talk">已购音乐</ol>
            </ol>
            <ol id="online" @click="getbox"><li class="el-icon-folder"></li> 我的歌单
                <!-- <ol class="left_box" >收藏的歌单</ol> -->
                <div id="hiddenbox" >
                    <div v-for="item in arr">
                        <img id="coverimg" :src="item.coverImgUrl" alt="">
                         <div class="minbox">{{item.name}}</div>
                         <div id="line"></div>
                    </div>
                </div>
            </ol>
            <div id="block"></div>
        </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
 name: 'leftnav',
 data(){
     return{
         sta:false,
         arr:"",
         
     }
 },
 mounted:function(){
     this.load();
 },
 methods:{
     talk(){
          this.$message({
                        message: '该功能正在全力开发中哦',
                        type: 'warning'
                        })
     },
     getbox(){
         this.sta=!this.sta;
          this.sta?document.getElementById("hiddenbox").style.display="block":document.getElementById("hiddenbox").style.display="none"
        //  console.log(sta)
        //     sta=="none"?sta="block":sta="none";
     },
     load(){
         let that=this;
          axios.get("http://39.101.203.189:3000/user/playlist?uid=1707176252").then(function(response) {

                         that.arr= response.data.playlist;

                        //   console.log(that.arr);

                    }, function(err) {})
     },
 }
}
</script>

<style scoped>
#hiddenbox{
    margin-top: 30px;
    display: none;
}
#main {
     position: absolute;
     top: 80px;
     left: -10px;
     height: 540px;
     width: 300px;
     text-align: center;
     color: #222031;
     overflow-y: scroll;
      user-select:none;
      background:radial-gradient(at bottom,rgb(48, 8, 1),transparent 50%) no-repeat;
     background-size: 100% 40px;
     background-position-y: 500px;
 }
 
 #online {
     position: relative;
     top: 20px;
     /* margin-top: 30px; */
     margin-left: 70px;
     margin-bottom: 10px;
     text-align: left;
     color: #7e7d7d;
     font-size: 16px;
     cursor: default;
 }
 
 .left_box {
     position: relative;
     width: 110px;
     height: 40px;
     font-size: 17px;
     font-weight: 500;
     text-align: left;
     transform: translate(-50%, -50%);
     display: block;
     top:30px;
     left: 25%;
     color: #777576;
     cursor: default;
 }
 .left_box:hover{
     color: rgb(95, 4, 4);
     /* background-color: #7e7d7d; */
 }
 /* .top_box:hover{
    color:#82abbb;
 } */
.el-icon-user-solid,.el-icon-s-platform,.el-icon-folder{
    position: relative;
    width: 20px;
    height: 20px;
    background-color: darkred;
    color: aliceblue;
    text-align: center;
    border-radius: 3px;
    margin-right: 10px;
}
.minbox {
     position: relative;
     width: 160px;
     height: 40px;
     font-size: 15px;
     font-weight: 400;
     vertical-align:middle;
     text-align: left;
     /* transform: translate(-50%, -50%); */
     top:-50px;
     left: 10%;
     color: #777576;
     display: inline-block;
     overflow: hidden;
     cursor: default;
   
 }
 #coverimg{
     position: relative;
     left:-50px;
     width: 50px;
     height: 50px;
     display: inline-block;
 }
 #line{
     position: relative;
     top:-20px;
     left: -40px;
     height: 1px;
     width: 200px;
     background-color: #4d030c;
 }
::-webkit-scrollbar {
  width: 8px; 
 
}
::-webkit-scrollbar-thumb {
  background-color:#2c2324;
  border-radius: 5px;
  height:30px;
}
</style>